<script setup lang="ts" name="CkPackage">
import { useDrag, useDrop } from 'vue3-dnd'
import { getEmptyImage } from 'react-dnd-html5-backend'
import { storeToRefs } from 'pinia'
import { toRefs } from '@vueuse/core'
import { useLayoutStore } from '@/store/bigScreen/layoutStore'
import { cloneDeep } from 'lodash-es'
import { getParent, getDropId, getDropLevel, getDropIndex, getNearDropIndex, getNearIndex, findFirstVisible, findLastVisible, findVisibleLength } from '../../../utils'

const layoutStore = useLayoutStore()

const { isLayoutDragging, isNear, isNearSelf, dropTo, dropLevel, dropIndex, dropId, layout, isItemSort } = storeToRefs(layoutStore)

const props = defineProps({
  info: {
    type: Object,
    default: () => {
      return {}
    }
  },
  preview: {
    type: Boolean,
    default: false
  },
  index: {
    type: Number,
    default: 0
  }
})

const [dragCollect, drag, preview] = useDrag({
  type: props.info.config.dragType,
  item: () => {
    const res = cloneDeep(props.info)
    res.component = null
    res.index = props.index
    if (res.config.position === 'left') {
      res.parent = getParent(layout.value.left, res.id)
      const index = layout.value.left[0].children.findIndex((v) => v.id === res.parent[res.parent.length - 2])
      if (index === findLastVisible(layout.value.left[0].children)) {
        res.isNearMain = true
      } else {
        res.isNearMain = false
      }
    } else if (res.config.position === 'right') {
      res.parent = getParent(layout.value.right, res.id)
      const index = layout.value.right[0].children.findIndex((v) => v.id === res.parent[res.parent.length - 2])
      if (index === findFirstVisible(layout.value.right[0].children)) {
        res.isNearMain = true
      } else {
        res.isNearMain = false
      }
    } else {
      res.parent = getParent(layout.value.root, res.id)
      res.isNearMain = false
    }
    layoutStore.setCurrentDraggingPreviewModule(res)
    return res
  },
  canDrag: () => {
    return props.info.config.canDrag
  },
  collect: (monitor) => ({
    isDragging: monitor.isDragging()
  })
})

const cardRef = ref(null)
const position = ref('')
const isFirst = ref(false)
const isEnd = ref(false)

const [dropCollect, drop] = useDrop({
  accept: props.info.config.acceptDragType,
  canDrop: () => {
    return props.info.config.canDrop
  },
  hover: (item: any, monitor) => {
    if (!cardRef.value) return
    const hoverBoundingRect = cardRef.value?.getBoundingClientRect()
    const clientOffset = monitor.getClientOffset()
    if (item.config.dragType === 'package') {
      const dropParent = getParent(layout.value[props.info.config.position], props.info.id)
      const dropAsideIndex = layout.value[props.info.config.position].findIndex((v) => v.id === dropParent[dropParent.length - 1])
      // 当前放置对象所在列的索引
      const dropColumnIndex = layout.value[props.info.config.position][dropAsideIndex].children.findIndex((v) => v.id === dropParent[dropParent.length - 2])
      if (clientOffset.y - hoverBoundingRect.top < 12 && clientOffset.y - hoverBoundingRect.top > 0 && (item.config.position === 'left' || item.config.position === 'right')) {
        position.value = ''
        isNear.value = true
        isNearSelf.value = true
        dropTo.value = item.config.position
        dropIndex.value = getDropIndex(layout.value, dropAsideIndex, dropColumnIndex, props.info, props.index, item.config.dragType)
        dropId.value = getDropId(layout.value, dropAsideIndex, dropColumnIndex, props.info, props.index, item.config.dragType)
        dropLevel.value = getDropLevel(layout.value, dropAsideIndex, dropColumnIndex, props.info, props.index, item.config.dragType)
      } else if (clientOffset.y - hoverBoundingRect.top < 12 && clientOffset.y - hoverBoundingRect.top > 0 && item.config.position === 'root' && findVisibleLength(layout.value.root[dropAsideIndex].children) > 1) {
        position.value = ''
        isNear.value = true
        isNearSelf.value = true
        dropTo.value = 'root'
        dropIndex.value = layout.value.root[dropAsideIndex].children.findIndex((v) => v.id === item.parent[item.parent.length - 2])
        dropId.value = item.parent[item.parent.length - 1]
        dropLevel.value = 'column'
      } else {
        position.value = ''
        isNear.value = false
        isNearSelf.value = false
        dropTo.value = 'root'
        dropIndex.value = -1
        dropId.value = ''
        dropLevel.value = 'aside'
      }
    } else if (item.config.dragType === 'tab') {
      if (props.info.config.position === 'left' || props.info.config.position === 'right') {
        // 拖拽对象所在列的索引
        const dragColumnIndex = item.config.position === 'root' ? -1 : layout.value[item.config.position][0].children.findIndex((v) => v.id === item.parent[item.parent.length - 2])
        // 当前放置对象所在列的索引
        const dropColumnIndex = layout.value[props.info.config.position][0].children.findIndex((v) => v.id === props.info.pid)
        // 查找当当前拖拽项所在列数组长度为1时，其临近列的索引，该种情况下，当前拖拽项不可被放置在临近列（也就是不可放在自己本身的位置）
        const nearColumnBeforeIndex = item.config.position === props.info.config.position && findVisibleLength(layout.value[item.config.position][0].children[dragColumnIndex].children) === 1 ? getNearIndex(layout.value[item.config.position][0].children, dragColumnIndex, 'before') : -1
        const nearColumnAfterIndex = item.config.position === props.info.config.position && findVisibleLength(layout.value[item.config.position][0].children[dragColumnIndex].children) === 1 ? getNearIndex(layout.value[item.config.position][0].children, dragColumnIndex, 'after') : -1
        if (clientOffset.x - hoverBoundingRect.left < 10 && props.info.config.position === 'left' && (nearColumnBeforeIndex < 0 || (nearColumnBeforeIndex > 0 && dropColumnIndex !== nearColumnBeforeIndex))) {
          position.value = 'left'
          isNear.value = true
          isNearSelf.value = false
          dropTo.value = 'left'
          dropIndex.value = getNearDropIndex(nearColumnBeforeIndex, dropColumnIndex, 'before')
          dropId.value = layout.value.left[0].id
          dropLevel.value = 'column'
          isFirst.value = dropColumnIndex === findFirstVisible(layout.value[props.info.config.position][0].children)
          isEnd.value = false
        } else if (hoverBoundingRect.right - clientOffset.x < 10 && props.info.config.position === 'left' && dropColumnIndex !== findLastVisible(layout.value[props.info.config.position][0].children) && (nearColumnAfterIndex < 0 || (nearColumnAfterIndex >= 0 && dropColumnIndex !== nearColumnAfterIndex))) {
          position.value = 'right'
          isNear.value = true
          isNearSelf.value = false
          dropTo.value = 'left'
          dropIndex.value = getNearDropIndex(nearColumnAfterIndex, dropColumnIndex, 'after')
          dropId.value = layout.value.left[0].id
          dropLevel.value = 'column'
          isFirst.value = false
          isEnd.value = false
        } else if (clientOffset.x - hoverBoundingRect.left < 10 && props.info.config.position === 'right' && dropColumnIndex !== findFirstVisible(layout.value[props.info.config.position][0].children) && (nearColumnBeforeIndex < 0 || (nearColumnBeforeIndex > 0 && dropColumnIndex !== nearColumnBeforeIndex))) {
          position.value = 'left'
          isNear.value = true
          isNearSelf.value = false
          dropTo.value = 'right'
          dropIndex.value = getNearDropIndex(nearColumnBeforeIndex, dropColumnIndex, 'before')
          dropId.value = layout.value.right[0].id
          dropLevel.value = 'column'
          isFirst.value = false
          isEnd.value = false
        } else if (hoverBoundingRect.right - clientOffset.x < 10 && props.info.config.position === 'right' && (nearColumnAfterIndex < 0 || (nearColumnAfterIndex >= 0 && dropColumnIndex !== nearColumnAfterIndex))) {
          position.value = 'right'
          isNear.value = true
          isNearSelf.value = false
          dropTo.value = 'right'
          dropIndex.value = getNearDropIndex(nearColumnAfterIndex, dropColumnIndex, 'after')
          dropId.value = layout.value.right[0].id
          dropLevel.value = 'column'
          isFirst.value = false
          isEnd.value = dropColumnIndex === findLastVisible(layout.value[props.info.config.position][0].children)
        } else {
          position.value = ''
          isNear.value = false
          isNearSelf.value = false
          dropTo.value = 'root'
          dropIndex.value = -1
          dropId.value = ''
          dropLevel.value = 'aside'
          isFirst.value = false
          isEnd.value = false
        }
      } else {
        const dragAsideIndex = item.config.position === 'root' ? layout.value.root.findIndex((v) => v.id === item.parent[item.parent.length - 1]) : -1
        const dropParent = getParent(layout.value.root, props.info.id)
        const dropAsideIndex = layout.value.root.findIndex((v) => v.id === dropParent[dropParent.length - 1])
        // 拖拽对象所在列的索引
        const dragColumnIndex = dragAsideIndex === -1 ? -1 : layout.value.root[dragAsideIndex].children.findIndex((v) => v.id === item.parent[item.parent.length - 2])
        // 当前放置对象所在列的索引
        const dropColumnIndex = layout.value.root[dropAsideIndex].children.findIndex((v) => v.id === dropParent[dropParent.length - 2])
        // 查找当当前拖拽项所在列数组长度为1时，其临近列的索引，该种情况下，当前拖拽项不可被放置在临近列（也就是不可放在自己本身的位置）
        const nearColumnBeforeIndex = item.parent[item.parent.length - 1] === dropParent[dropParent.length - 1] && findVisibleLength(layout.value[item.config.position][dragAsideIndex].children[dragColumnIndex].children) === 1 ? getNearIndex(layout.value[item.config.position][dragAsideIndex].children, dragColumnIndex, 'before') : -1
        const nearColumnAfterIndex = item.parent[item.parent.length - 1] === dropParent[dropParent.length - 1] && findVisibleLength(layout.value[item.config.position][dragAsideIndex].children[dragColumnIndex].children) === 1 ? getNearIndex(layout.value[item.config.position][dragAsideIndex].children, dragColumnIndex, 'after') : -1
        if (clientOffset.x - hoverBoundingRect.left < 10 && (nearColumnBeforeIndex < 0 || (nearColumnBeforeIndex > 0 && dropColumnIndex !== nearColumnBeforeIndex))) {
          position.value = 'left'
          isNear.value = true
          isNearSelf.value = false
          dropTo.value = 'root'
          dropIndex.value = getNearDropIndex(nearColumnBeforeIndex, dropColumnIndex, 'before')
          dropId.value = layout.value.root[dropAsideIndex].id
          dropLevel.value = 'column'
          isFirst.value = dropColumnIndex === findFirstVisible(layout.value[props.info.config.position][dropAsideIndex].children)
          isEnd.value = false
        } else if (hoverBoundingRect.right - clientOffset.x < 10 && (nearColumnAfterIndex < 0 || (nearColumnAfterIndex >= 0 && dropColumnIndex !== nearColumnAfterIndex))) {
          position.value = 'right'
          isNear.value = true
          isNearSelf.value = false
          dropTo.value = 'root'
          dropIndex.value = getNearDropIndex(nearColumnAfterIndex, dropColumnIndex, 'after')
          dropId.value = layout.value.root[dropAsideIndex].id
          dropLevel.value = 'column'
          isFirst.value = false
          isEnd.value = dropColumnIndex === findLastVisible(layout.value[props.info.config.position][dropAsideIndex].children)
        } else {
          position.value = ''
          isNear.value = false
          isNearSelf.value = false
          dropTo.value = 'root'
          dropIndex.value = -1
          dropId.value = ''
          dropLevel.value = 'aside'
          isFirst.value = false
          isEnd.value = false
        }
      }
    } else if (item.config.dragType === 'aside') {
      // 拖拽的aside
      if (props.info.config.position === 'left' || props.info.config.position === 'right') {
        // 当前放置对象所在列的索引
        const dropColumnIndex = layout.value[props.info.config.position][0].children.findIndex((v) => v.id === props.info.pid)
        if (clientOffset.x - hoverBoundingRect.left < 10 && props.info.config.position === 'left' && item.config.position !== props.info.config.position) {
          position.value = 'left'
          isNear.value = true
          isNearSelf.value = false
          dropTo.value = 'left'
          dropIndex.value = dropColumnIndex
          dropId.value = layout.value.left[0].id
          dropLevel.value = 'column'
          isFirst.value = dropColumnIndex === findFirstVisible(layout.value[props.info.config.position][0].children)
          isEnd.value = false
        } else if (hoverBoundingRect.right - clientOffset.x < 10 && props.info.config.position === 'left' && item.config.position !== props.info.config.position && dropColumnIndex !== findLastVisible(layout.value[props.info.config.position][0].children)) {
          position.value = 'right'
          isNear.value = true
          isNearSelf.value = false
          dropTo.value = 'left'
          dropIndex.value = dropColumnIndex + 1
          dropId.value = layout.value.left[0].id
          dropLevel.value = 'column'
          isFirst.value = false
          isEnd.value = false
        } else if (clientOffset.x - hoverBoundingRect.left < 10 && props.info.config.position === 'right' && item.config.position !== props.info.config.position && dropColumnIndex !== findFirstVisible(layout.value[props.info.config.position][0].children)) {
          position.value = 'left'
          isNear.value = true
          isNearSelf.value = false
          dropTo.value = 'right'
          dropIndex.value = dropColumnIndex
          dropId.value = layout.value.right[0].id
          dropLevel.value = 'column'
          isFirst.value = false
          isEnd.value = false
        } else if (hoverBoundingRect.right - clientOffset.x < 10 && props.info.config.position === 'right' && item.config.position !== props.info.config.position) {
          position.value = 'right'
          isNear.value = true
          isNearSelf.value = false
          dropTo.value = 'right'
          dropIndex.value = dropColumnIndex + 1
          dropId.value = layout.value.right[0].id
          dropLevel.value = 'column'
          isFirst.value = false
          isEnd.value = dropColumnIndex === findLastVisible(layout.value[props.info.config.position][0].children)
        } else {
          position.value = ''
          isNear.value = false
          isNearSelf.value = false
          dropTo.value = 'root'
          dropIndex.value = -1
          dropId.value = ''
          dropLevel.value = 'aside'
          isFirst.value = false
          isEnd.value = false
        }
      } else {
        // 放置的是root中的package
        const dropParent = getParent(layout.value.root, props.info.id)
        const dropAsideIndex = layout.value.root.findIndex((v) => v.id === dropParent[dropParent.length - 1])
        // 当前放置对象所在列的索引
        const dropColumnIndex = layout.value.root[dropAsideIndex].children.findIndex((v) => v.id === dropParent[dropParent.length - 2])
        if (clientOffset.x - hoverBoundingRect.left < 10 && item.id !== layout.value.root[dropAsideIndex].id) {
          position.value = 'left'
          isNear.value = true
          isNearSelf.value = false
          dropTo.value = 'root'
          dropIndex.value = dropColumnIndex
          dropId.value = layout.value.root[dropAsideIndex].id
          dropLevel.value = 'column'
          isFirst.value = dropColumnIndex === findFirstVisible(layout.value[props.info.config.position][dropAsideIndex].children)
          isEnd.value = false
        } else if (hoverBoundingRect.right - clientOffset.x < 10 && item.id !== layout.value.root[dropAsideIndex].id) {
          position.value = 'right'
          isNear.value = true
          isNearSelf.value = false
          dropTo.value = 'root'
          dropIndex.value = dropColumnIndex + 1
          dropId.value = layout.value.root[dropAsideIndex].id
          dropLevel.value = 'column'
          isFirst.value = false
          isEnd.value = dropColumnIndex === findLastVisible(layout.value[props.info.config.position][dropAsideIndex].children)
        } else {
          position.value = ''
          isNear.value = false
          isNearSelf.value = false
          dropTo.value = 'root'
          dropIndex.value = -1
          dropId.value = ''
          dropLevel.value = 'aside'
          isFirst.value = false
          isEnd.value = false
        }
      }
    } else {
      isItemSort.value = false
      layoutStore.setCurrentDraggingPreviewModule(item)
      if (props.info.config.position === 'left' || props.info.config.position === 'right') {
        // 拖拽对象所在列的索引
        const dragColumnIndex = item.config.position === 'root' || item.config.position === 'bottom' ? -1 : layout.value[item.config.position][0].children.findIndex((v) => v.id === item.parent[item.parent.length - 2])
        // 当前放置对象所在列的索引
        const dropColumnIndex = layout.value[props.info.config.position][0].children.findIndex((v) => v.id === props.info.pid)
        const dragTabIndex = item.config.position === 'root' || item.config.position === 'bottom' || dragColumnIndex < 0 ? -1 : layout.value[item.config.position][0].children[dragColumnIndex].children.findIndex((v) => v.id === item.parent[item.parent.length - 3])
        // 查找当当前拖拽项所在列数组长度为1时，其临近列的索引，该种情况下，当前拖拽项不可被放置在临近列（也就是不可放在自己本身的位置）
        const nearColumnBeforeIndex = item.config.position === props.info.config.position && findVisibleLength(layout.value[item.config.position][0].children[dragColumnIndex].children) === 1 && findVisibleLength(layout.value[item.config.position][0].children[dragColumnIndex].children[dragTabIndex].children) === 1 ? getNearIndex(layout.value[item.config.position][0].children, dragColumnIndex, 'before') : -1
        const nearColumnAfterIndex = item.config.position === props.info.config.position && findVisibleLength(layout.value[item.config.position][0].children[dragColumnIndex].children) === 1 && findVisibleLength(layout.value[item.config.position][0].children[dragColumnIndex].children[dragTabIndex].children) === 1 ? getNearIndex(layout.value[item.config.position][0].children, dragColumnIndex, 'after') : -1
        if (clientOffset.x - hoverBoundingRect.left < 10 && props.info.config.position === 'left' && (nearColumnBeforeIndex < 0 || (nearColumnBeforeIndex > 0 && dropColumnIndex !== nearColumnBeforeIndex))) {
          position.value = 'left'
          isNear.value = true
          isNearSelf.value = false
          dropTo.value = 'left'
          dropIndex.value = getNearDropIndex(nearColumnBeforeIndex, dropColumnIndex, 'before')
          dropId.value = layout.value.left[0].id
          dropLevel.value = 'column'
          isFirst.value = dropColumnIndex === findFirstVisible(layout.value[props.info.config.position][0].children)
          isEnd.value = false
        } else if (hoverBoundingRect.right - clientOffset.x < 10 && props.info.config.position === 'left' && dropColumnIndex !== findLastVisible(layout.value[props.info.config.position][0].children) && (nearColumnAfterIndex < 0 || (nearColumnAfterIndex >= 0 && dropColumnIndex !== nearColumnAfterIndex))) {
          position.value = 'right'
          isNear.value = true
          isNearSelf.value = false
          dropTo.value = 'left'
          dropIndex.value = getNearDropIndex(nearColumnAfterIndex, dropColumnIndex, 'after')
          dropId.value = layout.value.left[0].id
          dropLevel.value = 'column'
          isFirst.value = false
          isEnd.value = false
        } else if (clientOffset.x - hoverBoundingRect.left < 10 && props.info.config.position === 'right' && dropColumnIndex !== findFirstVisible(layout.value[props.info.config.position][0].children) && (nearColumnBeforeIndex < 0 || (nearColumnBeforeIndex > 0 && dropColumnIndex !== nearColumnBeforeIndex))) {
          position.value = 'left'
          isNear.value = true
          isNearSelf.value = false
          dropTo.value = 'right'
          dropIndex.value = getNearDropIndex(nearColumnBeforeIndex, dropColumnIndex, 'before')
          dropId.value = layout.value.right[0].id
          dropLevel.value = 'column'
          isFirst.value = false
          isEnd.value = false
        } else if (hoverBoundingRect.right - clientOffset.x < 10 && props.info.config.position === 'right' && (nearColumnAfterIndex < 0 || (nearColumnAfterIndex >= 0 && dropColumnIndex !== nearColumnAfterIndex))) {
          position.value = 'right'
          isNear.value = true
          isNearSelf.value = false
          dropTo.value = 'right'
          dropIndex.value = getNearDropIndex(nearColumnAfterIndex, dropColumnIndex, 'after')
          dropId.value = layout.value.right[0].id
          dropLevel.value = 'column'
          isFirst.value = false
          isEnd.value = dropColumnIndex === findLastVisible(layout.value[props.info.config.position][0].children)
        } else {
          position.value = ''
          isNear.value = false
          isNearSelf.value = false
          dropTo.value = 'root'
          dropIndex.value = -1
          dropId.value = ''
          dropLevel.value = 'aside'
          isFirst.value = false
          isEnd.value = false
        }
      } else {
        const dragAsideIndex = item.config.position === 'root' ? layout.value.root.findIndex((v) => v.id === item.parent[item.parent.length - 1]) : -1
        const dropParent = getParent(layout.value.root, props.info.id)
        const dropAsideIndex = layout.value.root.findIndex((v) => v.id === dropParent[dropParent.length - 1])
        // 拖拽对象所在列的索引
        const dragColumnIndex = dragAsideIndex === -1 ? -1 : layout.value.root[dragAsideIndex].children.findIndex((v) => v.id === item.parent[item.parent.length - 2])
        // 当前放置对象所在列的索引
        const dropColumnIndex = layout.value.root[dropAsideIndex].children.findIndex((v) => v.id === dropParent[dropParent.length - 2])
        const dragTabIndex = item.config.position === 'root' ? layout.value[item.config.position][dragAsideIndex].children[dragColumnIndex].children.findIndex((v) => v.id === item.parent[item.parent.length - 3]) : -1
        // 查找当当前拖拽项所在列数组长度为1时，其临近列的索引，该种情况下，当前拖拽项不可被放置在临近列（也就是不可放在自己本身的位置）
        const nearColumnBeforeIndex = item.parent[item.parent.length - 1] === dropParent[dropParent.length - 1] && findVisibleLength(layout.value[item.config.position][dragAsideIndex].children[dragColumnIndex].children) === 1 && findVisibleLength(layout.value[item.config.position][dragAsideIndex].children[dragColumnIndex].children[dragTabIndex].children) === 1 ? getNearIndex(layout.value[item.config.position][dragAsideIndex].children, dragColumnIndex, 'before') : -1
        const nearColumnAfterIndex = item.parent[item.parent.length - 1] === dropParent[dropParent.length - 1] && findVisibleLength(layout.value[item.config.position][dragAsideIndex].children[dragColumnIndex].children) === 1 && findVisibleLength(layout.value[item.config.position][dragAsideIndex].children[dragColumnIndex].children[dragTabIndex].children) === 1 ? getNearIndex(layout.value[item.config.position][dragAsideIndex].children, dragColumnIndex, 'after') : -1
        if (clientOffset.x - hoverBoundingRect.left < 10 && (nearColumnBeforeIndex < 0 || (nearColumnBeforeIndex > 0 && dropColumnIndex !== nearColumnBeforeIndex))) {
          position.value = 'left'
          isNear.value = true
          isNearSelf.value = false
          dropTo.value = 'root'
          dropIndex.value = getNearDropIndex(nearColumnBeforeIndex, dropColumnIndex, 'before')
          dropId.value = layout.value.root[dropAsideIndex].id
          dropLevel.value = 'column'
          isFirst.value = dropColumnIndex === findFirstVisible(layout.value[props.info.config.position][dropAsideIndex].children)
          isEnd.value = false
        } else if (hoverBoundingRect.right - clientOffset.x < 10 && (nearColumnAfterIndex < 0 || (nearColumnAfterIndex >= 0 && dropColumnIndex !== nearColumnAfterIndex))) {
          position.value = 'right'
          isNear.value = true
          isNearSelf.value = false
          dropTo.value = 'root'
          dropIndex.value = getNearDropIndex(nearColumnAfterIndex, dropColumnIndex, 'after')
          dropId.value = layout.value.root[dropAsideIndex].id
          dropLevel.value = 'column'
          isFirst.value = false
          isEnd.value = dropColumnIndex === findLastVisible(layout.value[props.info.config.position][dropAsideIndex].children)
        } else {
          position.value = ''
          isNear.value = false
          isNearSelf.value = false
          dropTo.value = 'root'
          dropIndex.value = -1
          dropId.value = ''
          dropLevel.value = 'aside'
          isFirst.value = false
          isEnd.value = false
        }
      }
    }
  },
  collect(monitor) {
    return {
      isOverCurrent: monitor.isOver({ shallow: true })
    }
  },
  drop(item) {
    if (dropTo.value !== 'root') {
      const res: any = cloneDeep(item)
      res.options.attr.x = 0
      res.options.attr.y = 0
      layoutStore.moveLayout(res)
    }
  }
})
const { isOverCurrent } = toRefs(dropCollect)

const { isDragging } = toRefs(dragCollect)

watch(
  () => isDragging.value,
  (value) => {
    isLayoutDragging.value = value
  }
)

const setRef = (el) => {
  cardRef.value = drop(el)
}

onMounted(() => {
  preview(getEmptyImage(), { captureDraggingState: true })
})
</script>

<template>
  <div :ref="setRef" class="package-pane" :class="props.preview ? 'preview' : ''">
    <div :class="['package', isNearSelf ? 'active' : '', isDragging ? 'is-dragging' : '', props.preview ? 'preview' : '', props.info.config.position]">
      <div :ref="drag" class="drag-handle" :style="{ opacity: isDragging ? 0 : 1 }">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
      <div class="package-body">
        <div class="item-tool active">
          <svg-icon icon="ri:layout-line"></svg-icon>
          <span>布局</span>
        </div>
        <div class="item-tool">
          <svg-icon icon="ri:box-3-line"></svg-icon>
          <span>控件</span>
        </div>
        <div class="item-tool">
          <svg-icon icon="ri:bar-chart-2-line"></svg-icon>
          <span>图表</span>
        </div>
        <div class="item-tool">
          <svg-icon icon="ri:remixicon-line"></svg-icon>
          <span>图标</span>
        </div>
      </div>
    </div>
    <div v-if="isLayoutDragging && isOverCurrent && (position === 'left' || position === 'right')" :class="['indicator', props.info.config.position === 'root' ? 'root' : '', position, isEnd ? 'is-end' : '', isFirst ? 'is-first' : '']"></div>
  </div>
</template>

<style scoped lang="scss">
.package-pane {
  display: flex;
  flex: 1;
  width: 100%;
  pointer-events: auto;

  &.preview {
    transition: opacity 0.3s;
    pointer-events: none;

    * {
      pointer-events: none;
    }
  }
}

.package {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 64px;
  overflow: hidden;
  background-color: var(--el-header-bg-color);
  border: 1px solid var(--el-bg-color-page);

  &.is-dragging {

    * {
      opacity: 0;
    }

    &.active {
      &::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 2px solid var(--el-color-primary);
        content: '';
      }
    }
  }

  &.preview {
    border: 1px solid var(--el-bg-color-page);
    transition: opacity 0.3s;
  }

  .drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 12px;
    pointer-events: auto;

    span {
      width: 3px;
      height: 4px;
      border-right: 1px solid var(--el-bg-color);
      border-left: 1px solid var(--el-bg-color);
    }

    span+span {
      margin-left: 1px;
    }
  }

  .package-body {
    flex: 1;
  }

  .item-tool {
    position: relative;
    display: block;
    margin-top: 8px;
    padding: 6px;
    cursor: pointer;

    &::before {
      position: absolute;
      inset: 0 8px;
      display: block;
      border-radius: 4px;
      content: '';
    }

    &.active {
      &::before {
        background-color: var(--el-color-primary-light-9);
      }

      &:hover {
        &::before {
          background-color: var(--el-color-primary-light-9);
        }
      }

      .el-icon,
      >span {
        color: var(--el-color-primary);
      }
    }

    &:hover {
      &::before {
        background-color: var(--el-fill-color-light);
      }
    }

    .el-icon {
      position: relative;
      z-index: 1;
      display: flex;
      margin: 0 auto;
      font-size: 20px !important;
    }

    >span {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      line-height: 1.75;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}

.indicator {
  position: absolute;
  z-index: 10;

  &.right {
    top: 0;
    right: -3px;
    bottom: 0;
    width: 0;
    border-left: 5px solid var(--el-color-primary);

    &.is-end {
      right: 0;
    }
  }

  &.left {
    top: 0;
    bottom: 0;
    left: -3px;
    width: 0;
    border-left: 5px solid var(--el-color-primary);

    &.root {
      left: -2px;
    }

    &.is-first {
      left: 0;
    }
  }
}
</style>
